<template>
  <view class="">
    <uni-easyinput primaryColor="#38C09E" v-model="inputValue" :placeholder="tag.placeholder||'请输入内容'" v-if="inputType==='string'">
    </uni-easyinput>
    <uni-data-select v-model="inputValue" :localdata="localdata" v-else-if="['Enum','fk'].includes(inputType)"
      @clear="reset">
    </uni-data-select>
    <uni-data-picker :allow-select-branch="true" v-model="inputValue" :localdata="localdata"
      :map='treeMap' popup-title="请选择" v-else-if="inputType==='tree'"></uni-data-picker>

  </view>
</template>

<script>
  import {
    list2tree
  } from '@/common/api/goods.js'
  export default {
    name: "string-input",
    props: {
      tag: {
        type: Object
      },
      local: {
        type: [Array, Object]
      }
    },
    computed: {
      inputType() {
        if (this.tag?.more_config?.option_list?.isTree === true) {
          return 'tree'
        }
        return this.tag?.inputType
      }
    },
    data() {
      return {
        inputValue: "",
        localdata: [],
        treeMap: {
          text: 'label',
          value: "value"
        },
      }

    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        if (this.inputType === 'tree') {
          this.getTreeData()
        } else if (this.tag?.inputType === 'fk') {
          this.loadFkData()
        } else if (this.tag?.inputType === 'Enum') {
          this.localdata = this.local || []
          if (Array.isArray(this.tag?.more_config?.options) && this.tag?.more_config?.options.length > 0) {
            this.localdata = this.tag?.more_config?.options.map(item => {
              item.text = item.label;
              return item
            })
          }
        }
      },
      // 查找树型数据
      async getTreeData() {
        const srvInfo = this.tag?.more_config?.option_list
        this.treeMap.text = srvInfo.key_disp_col
        this.treeMap.value = srvInfo.refed_col
        if (srvInfo?.serviceName) {
          const serviceName = srvInfo.serviceName;
          const appName = srvInfo.appNo || srvInfo.srv_app || this.srvApp;
          const parentCol = srvInfo?.parent_col || srvInfo?.parentCol
          let url = this.getServiceUrl(appName, serviceName, 'select');
          let condition = [];
          if (srvInfo.isTree === false) {
            condition = [];
          }

          let req = {
            serviceName: serviceName,
            colNames: ['*'],
            condition: condition,
          };
          const res = await this.$http.post(url, req);
          if (res && res.data && res.data.state === 'SUCCESS') {
            const nodeList = res.data.data;
            this.localdata = list2tree(nodeList)
          }
        }
      },
      loadFkData() {
        const option_list = this.tag?.more_config?.option_list
        if (option_list?.serviceName) {
          const url = `/${option_list?.app||'retail'}/select/${option_list?.serviceName}`
          const req = {
            "serviceName": option_list?.serviceName,
            "colNames": ["*"],
            "condition": [],
          }
          this.$http.post(url, req).then(res => {
            if (Array.isArray(res?.data?.data) && res.data.data.length > 0) {
              this.localdata = res.data.data.map(item => {
                item.text = item[option_list.key_disp_col || option_list.refed_col]
                item.value = item[option_list.refed_col]
                return item
              })
            }
          })
        }
      },
      reset() {
        this.inputValue = ''
      },
      getVal() {
        return this.inputValue
      }
    },
  }
</script>

<style scoped>
  ::v-deep uni-input {
    min-height: 5rem;
    font-size: 2.4rem;
  }

  ::v-deep .uni-easyinput__content-input {
    height: 5rem;
  }

  ::v-deep .uni-input-wrapper {
    font-size: 2.4rem;
  }

  ::v-deep .uni-select__input-text {
    font-size: 2.4rem;
  }

  ::v-deep .uni-select__input-placeholder {
    color: #aaa;
  }



  ::v-deep .uni-input-placeholder {
    font-size: 2.4rem;
  }

  ::v-deep .uni-select {
    min-height: 5rem;
  }
</style>
